<template>
	<Empty v-if="list.totalCount === 0" flag></Empty>


	<view class="content" v-else>
		<view class="header">
			<view class="user">
				<view>用户</view>
				<view class="usernumber">{{ list.total_num }}</view>
				<view>人</view>
			</view>
		</view>
		<view class="box">
			<view class="yonghubox" v-for="(item, index) in list.list" :key="index">
				<view class="leftImg">
					<image :src="item.avatar" mode=""></image>
				</view>

				<view class="rightInfo">
					<view class="rightInfoTop">
						<view class="nikename">
							{{ item.nickname }}
						</view>
						<view class="time">
							绑定日期
						</view>
					</view>
					<view class="rightInfoBottom">
						<view class="ID">
							ID：{{ item.id }}
						</view>
						<view class="createTime">
							{{ item.create_time }}
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
import Empty from '@/components/empty/empty.vue'
export default {
	components: {
		Empty
	},
	data() {
		return {
			list: []
		}
	},
	onLoad() {
		this.getlist()
	},
	methods: {
		getlist() {
			this.$Request.get(this.$api.user.teamList).then(res => {
				this.list = res.data
			});
		},
		goUrl(url) {
			uni.navigateTo({
				url
			})
		}
	}
};
</script>

<style scoped lang="scss">
.yonghuimg {
	width: 92rpx;
	height: 92rpx;
	margin-top: 35rpx;
	margin-left: 25rpx;
}

.content {
	background-color: #262626;
	min-height: 100vh;
}

.bottomBox {
	width: 100%;
	height: 96rpx;
	position: fixed;
	left: 3%;
	bottom: 33rpx;
}

.bottombtn {
	width: 710rpx;
	height: 96rpx;

	background: rgba(255, 231, 192, 0.1);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	border: 1rpx solid #FED187;
	border-radius: 48px;
	text-align: center;
	line-height: 96rpx;
	color: white;
}


.box {
	margin-top: -170rpx;

}

.yonghubox {
	width: 690rpx;
	height: 160rpx;
	// background: #FFFFFF;
	background: rgba(255, 231, 192, 0.1);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	border: 1rpx solid #FED187;
	border-radius: 20rpx;
	margin: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;


	.rightInfo {
		flex: 1;
		display: flex;
		flex-direction: column;


		.rightInfoTop {
			margin-right: 72rpx;
			display: flex;
			justify-content: space-between;
			font-family: PingFang SC;
			font-weight: 500;

			.nikename {
				font-size: 28rpx;
				color: #fff;
			}

			.time {
				font-size: 24rpx;
				color: #fff;
			}
		}

		.rightInfoBottom {
			margin-right: 42rpx;
			margin-top: 37rpx;
			display: flex;
			justify-content: space-between;

			.ID {
				font-size: 24rpx;
				color: #fff;
			}

			.createTime {
				font-size: 2r4px;
				color: #fff;
			}
		}
	}

	.leftImg {
		width: 92rpx;
		height: 92rpx;
		margin-left: 36rpx;
		margin-right: 23rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
}

.header {
	width: 100%;
	height: 286rpx;
	// background: linear-gradient(180deg, #59BAFF 1%, #94D2FF 100%);
	// border: 1rpx solid #59BAFF;
	border-radius: 0% 0% 50% 50%;
	color: #FFFFFF;
	font-size: 28rpx;
	padding-top: 46rpx;

	.user {
		display: flex;
		height: 50rpx;
		align-items: flex-end;

		// margin-top: 46rpx;
		margin-left: 45rpx;

		view {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 50rpx;
			opacity: 0.7;
		}

		.usernumber {
			font-weight: bold;
			font-size: 44rpx;
			opacity: 1;
			color: #FD9E00;
		}
	}
}
</style>
